<template>
    <div class="search">
        <el-form ref="ruleFormRef" :model="ruleForm" label-width="170px" class="demo-ruleForm" size="default"
            status-icon>
            <header>
                <div class="left">
                    <el-icon style="vertical-align: middle">
                        <Search />
                    </el-icon>
                    <span>筛选搜索</span>
                </div>
                <div>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                    <el-button type="primary" @click="submitForm">重新搜索</el-button>
                </div>
            </header>
            <section>
                <el-form-item label="输入搜索" prop="keyword">
                    <el-input v-model="ruleForm.keyword" placeholder="商品名称" />
                </el-form-item>
                <el-form-item label="商品货号" prop="productSn">
                    <el-input v-model="ruleForm.productSn" placeholder="商品货号" />
                </el-form-item>
                <el-form-item label="商品分类" prop="productCategoryId">
                    <el-cascader v-model="ruleForm.productCategoryId" :options="options" :props="props" clearable />
                </el-form-item>
                <el-form-item label="商品品牌" prop="brandId">
                    <el-select v-model="ruleForm.brandId" placeholder="请选择品牌">
                        <el-option v-for="item in brandSort" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="上架状态" prop="publishStatus">
                    <el-select v-model="ruleForm.publishStatus" placeholder="全部">
                        <el-option label="上架 " :value="0" />
                        <el-option label="下架" :value="1" />
                    </el-select>
                </el-form-item>
                <el-form-item label="审核状态" prop="verifyStatus">
                    <el-select v-model="ruleForm.verifyStatus" placeholder="全部">
                        <el-option label="审核通过" :value="1" />
                        <el-option label="未审核" :value="0" />
                    </el-select>
                </el-form-item>
            </section>
        </el-form>
    </div>
</template>
    
<script setup lang='ts'>
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import * as http from '@/request/api'
const props = {
    value: "id", label: "name"
}

// 获取商品分类
let options = ref<productCategoryListParams[]>([])
const getProSortList = async () => {
    let res = await http.commodity.productCategoryList()
    if (res.code !== 200) return
    options.value = res.data
}
getProSortList()
// 获取品牌分类
let brandSort = ref<productCategorys[]>([])
const brandListAll = async () => {
    let res = await http.commodity.brandListAll()
    if (res.code !== 200) return;
    brandSort.value = res.data
}
brandListAll()



const emit = defineEmits(['seachKey'])
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<Indexable>({
    keyword: '',
    productSn: '',
    productCategoryId: '',
    brandId: '',
    publishStatus: '',
    verifyStatus: ''
})

const submitForm = () => {
    let obj: Indexable = {}
    for (let k in ruleForm) {
        if (ruleForm[k]) {
            if (k == 'productCategoryId') {
                obj[k] = ruleForm[k][1]
            } else {
                obj[k] = ruleForm[k]
            }
        }
    }
    emit('seachKey', obj)
}

const resetForm = (formEl: FormInstance | undefined) => {


    if (!formEl) return;
    formEl.resetFields()
    emit('seachKey', {})
}
</script>
    
<style lang="less" scoped >
.search {
    padding: 20px;
    box-shadow: 0 0 20px #ccc;

    header {
        display: flex;
        justify-content: space-between;


        .left span {
            padding-left: 15px;
        }
    }

    section {
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        justify-content: space-between;
        margin-top: 10px;
    }

    :deep(.el-form-item) {
        min-width: 384px;
        // flex: 1;
        width: 33%;
    }

}
</style>